<template>
  <!-- 科研人才足迹圈 -->
  <div style="position:relative">
    <div class="flow-box">
      <div v-for="(item, index) in flowData" :key="index" class="flow-item-box">
        <div class="flow-item">
          <h4>{{ item.startYear }}</h4>
          <p>
            <span class="tit">任职地点：</span
            ><span class="cotent">{{ item.name }}</span>
          </p>
          <p>
            <span class="tit">任职机构：</span
            ><span class="cotent">{{ item.an }}</span>
          </p>
        </div>
        <i class="arrow el-icon-bottom"></i>
      </div>
    </div>
    <div id="chartThree"></div>
  </div>
</template>

<script>
// import chinaJson from "echarts/map/json/china.json"
import chinaJson from "@/utils/mock/china.json";
import chinaJson2 from "@/utils/mock/china.json";
// import worldJson from "echarts/map/json/world.json"
// import { world } from "@/utils/mock/world"
import { transCNCountry, resize } from "@/utils/utils";
import { geoCoord } from "@/utils/mock/geoCoordMap";
export default {
  mixins: [resize],
  props: {
    info: {
      type: Object,
    },
  },
  data() {
    return {
      chartThree: null,
      data: [],
      flowData: [],
      defaultOption: {},
    };
  },
  methods: {
    init() {
      this.$echarts.registerMap("china", chinaJson);
      let data = this.info.record;
      let dat = [];
      data.forEach((v) => {
        if (v.city !== "") {
          dat.push(v);
        }
      });

      let newData = [];
      let ths = this;
      for (let i in dat) {
        if (dat[i].city && dat[i].city !== "") {
          // 过滤掉city为空的数据
          dat[i].startYear = dat[i].start.split("-")[0];
          dat[i].name = dat[i].city; // .replace(/市|省|自治区|壮族自治区|维吾尔|回族自治区/g, '')
          let from = dat[i];
          let to = dat[Number(i) + 1] || { name: "" };
          if (to.name !== "" && to.city !== "") {
            newData.push([from, to]);
          }
        }
      }

      this.data = newData;

      var convertData = function(data) {
        let res = [];
        for (let i in data) {
          let dataItem = data[i];
          let fromCoord =
            (dataItem[0] && ths.getGeoCoord(dataItem[0].name)) || [];
          let toCoord =
            (dataItem[1] && ths.getGeoCoord(dataItem[1].name)) || [];
          if (fromCoord.length > 0 && toCoord.length > 0) {
            res.push({
              fromName: dataItem[0].name,
              toName: dataItem[1].name,
              coords: [fromCoord, toCoord],
              visualMap: false,
            });
          }
        }
        return res;
      };

      var series = [];

      let startData = JSON.parse(JSON.stringify(this.data));
      if (startData.length > 0) {
        startData.forEach((v, n) => {
          let newArr = [[v]];
          newArr.forEach((item, i) => {
            let effectScatter = [];
            item.forEach((b, j) => {
              effectScatter.push({
                value: ths.getGeoCoord(b[0].name),
                ...b[0],
                visualMap: false,
              });
            });

            series.push(
              {
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 2,
                animation: false,
                tooltip: {
                  show: false,
                },
                rippleEffect: {
                  //涟漪特效
                  color: "#e6f7f3",
                  period: 3, //动画时间，值越小速度越快
                  brushType: "fill", //波纹绘制方式 stroke, fill
                  scale: 2, //波纹圆环最大限制，值越大波纹越大
                },
                symbol: "circle",
                symbolSize: function(val) {
                  return 13; //圆环大小
                },
                itemStyle: {
                  normal: {
                    color: "#03b38c", //标志颜色
                    borderColor: "#fff",
                  },
                  emphasis: {
                    areaColor: "orange",
                  },
                },
                data: effectScatter,
              },
              {
                type: "lines",
                zlevel: 2,
                animation: false,
                tooltip: {
                  show: false,
                },
                effect: {
                  show: false,
                  period: 3, //箭头指向速度，值越小速度越快
                  trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                  symbol: "arrow", //箭头图标
                  symbolSize: 8, //图标大小
                  color: "241c75",
                  loop: true,
                },
                lineStyle: {
                  // color: "white",
                  normal: {
                    color: "#4fc9ae",
                    width: 1,
                    opacity: 0.2,
                    curveness: 0.1, // 边的弧度
                  },
                },
                data: convertData(item),
              }
            );
          });

          // 最后一个点特殊处理，将两个点都加进来
          if (n === startData.length - 1) {
            let effectScatter2 = [];
            newArr.forEach((item, i) => {
              item.forEach((b, j) => {
                effectScatter2.push({
                  value: ths.getGeoCoord(b[1].name),
                  ...b[1],
                  visualMap: false,
                });
              });
            });

            series.push({
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 2,
              animation: false,
              tooltip: {
                show: false,
              },
              rippleEffect: {
                //涟漪特效
                color: "#e6f7f3",
                period: 3, //动画时间，值越小速度越快
                brushType: "fill", //波纹绘制方式 stroke, fill
                scale: 2, //波纹圆环最大限制，值越大波纹越大
              },
              symbol: "circle",
              symbolSize: function(val) {
                return 13; //圆环大小
              },
              itemStyle: {
                normal: {
                  color: "#03b38c", //标志颜色
                  borderColor: "#fff",
                },
                emphasis: {
                  areaColor: "orange",
                },
              },
              data: effectScatter2,
            });
          }
        });
      } else {
        // 如果newData数据为空，代表此人一直在一个公司工作，没有发生人才流动，此时补充节点
        if (dat[0]) {
          let effectScatter = [
            {
              value: ths.getGeoCoord(dat[0].city),
              ...dat[0],
              visualMap: false,
            },
          ];

          series.push({
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            animation: false,
            tooltip: {
              show: false,
            },
            rippleEffect: {
              //涟漪特效
              color: "#e6f7f3",
              period: 3, //动画时间，值越小速度越快
              brushType: "fill", //波纹绘制方式 stroke, fill
              scale: 2, //波纹圆环最大限制，值越大波纹越大
            },
            symbol: "circle",
            symbolSize: function(val) {
              return 13; //圆环大小
            },
            itemStyle: {
              normal: {
                color: "#03b38c", //标志颜色
                borderColor: "#fff",
              },
              emphasis: {
                areaColor: "orange",
              },
            },
            data: effectScatter,
          });
        }
      }

      let option = {
        backgroundColor: "#fff",
        title: {
          text: "",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "#03b38c",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          formatter: function(params, ticket, callback) {
            //根据业务自己拓展要显示的内容
            var res = "";
            var name = params.name;
            var value = params.value[params.seriesIndex + 1];
            res =
              "<span style='color:#fff;'>" +
              name +
              "</span><br/>数据：" +
              value;
            return res;
          },
        },
        visualMap: {
          //图例值控制
          min: 0,
          max: 10000,
          show: false,
          calculable: true,
        },
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: true, //是否允许缩放
          layoutCenter: ["50%", "66%"], //地图位置
          layoutSize: "130%",
          itemStyle: {
            normal: {
              areaColor: "#edf0f4",
              borderColor: "#fff",
            },
            // emphasis: {
            //     areaColor: '#edf0f4'
            // }
          },
        },
        series: series,
      };

      this.defaultOption = option;
      this.chartThree.setOption(option);
    },
    // 获取省市中心坐标
    getGeoCoord(name) {
      let geoCoord = [];
      let features = chinaJson2.features;
      for (let i in features) {
        let properties = features[i].properties;
        if (properties.name === name) {
          geoCoord = properties.centroid || properties.center;
          break;
        }
      }
      return geoCoord;
    },
  },
  watch: {
    info() {
      this.chartThree = this.$echarts.init(
        document.getElementById("chartThree")
      );
      this.init();
    },
  },
  mounted() {
    // 与右侧列表联动
    this.$Bus.$on("curWorkExperience", (d) => {
      this.flowData = [];
      let active = d.active;
      let item = d.item;
      let option = this.chartThree.getOption();
      let series = option.series;
      let curIndex = 0; // 当前高亮的index
      if (active !== -1) {
        for (let i in option.series) {
          if (option.series[i].type === "effectScatter") {
            let effectScatterData = option.series[i].data;
            for (let j in effectScatterData) {
              if (
                effectScatterData[j] &&
                effectScatterData[j].an === item.an &&
                effectScatterData[j].title === item.title &&
                effectScatterData[j].start === item.start
              ) {
                curIndex = Number(i);
                // 高亮
                option.series[i].itemStyle.color = "orange";
                option.series[i].z = 3;
                option.series[i].zlevel = 3;
                this.flowData.push(option.series[i].data[0]);
              } else {
                // 重置默认样式
                option.series[i].itemStyle.color = "#504da5";
                option.series[i].z = 2;
                option.series[i].zlevel = 2;
              }
            }
          } else {
            option.series[i].effect.show = false;
            option.series[i].effect.color = "#504da5";
            option.series[i].lineStyle = {
              color: "#504da5",
              width: 1,
            };
          }
        }

        if (curIndex + 2 <= option.series.length) {
          //
          if (option.series[curIndex + 1].effect) {
            option.series[curIndex + 1].effect.show = true;
            option.series[curIndex + 1].effect.color = "orange";
            option.series[curIndex + 1].lineStyle = {
              color: "orange",
              width: 2,
            };
          }
          //
          if (option.series[curIndex + 2].itemStyle) {
            option.series[curIndex + 2].itemStyle.color = "orange";
            option.series[curIndex + 2].z = 3;
            option.series[curIndex + 2].zlevel = 3;
            this.flowData.push(option.series[curIndex + 2].data[0]);
          }
        }
        this.chartThree.setOption(option);
      } else {
        this.chartThree.setOption(this.defaultOption);
      }
    });
  },
  beforeDestroy() {
    this.$Bus.$off("curWorkExperience");
  },
};
</script>

<style lang="scss" scoped>
.flow-box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 35%;
  padding-left: 0;
  list-style: none;
  .flow-item-box {
    position: relative;
    width: 100%;
    &:last-of-type {
      .arrow {
        display: none;
      }
    }
    .flow-item {
      width: 100%;
      padding: 10px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.2);
      h4 {
        line-height: 20px;
        border-bottom: "1px solid #000";
        font-size: 14px;
        color: "#595959";
      }
      p {
        line-height: 1.5;
        padding-left: 0;
        margin-bottom: 0;
        font-size: 12px;
        color: "#241c75";
        .content {
          font-weight: bold;
        }
      }
    }
    .arrow {
      position: relative;
      display: block;
      width: 100%;
      text-align: center;
    }
  }
}
#chartThree {
  width: 100%;
  height: 360px;
}
</style>
